<style lang="less">
  .el-collapse-item__header{
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    .el-collapse-item__arrow{
      display: none !important;
    }
  }
</style>
<template>
  <div v-if="historyList.length > 0" class="historyDiv">
    <div class="hisTitle">
      <span class="title">历史经验</span>
      <span class="num">共计{{historyList.length}}个案例推荐</span>
    </div>
    <el-collapse v-model="activeName" accordion>
      <div class="items" v-for="(item,index) in historyList">
        <el-collapse-item :name="index">
          <template slot="title">
            <div class="itemTitle">
              <div class="item_left">
                <div class="il_top">{{item.title}}【{{item.doc.type}}】</div>
                <div class="il_bottom">开启时间: {{timestampToTime(item.doc.createTime)}}<span v-if="item.doc.creatorName != undefined && item.doc.creatorName != null">Leader: {{item.doc.creatorName}}</span></div>
              </div>
              <div class="item_right"><i class="el-icon-arrow-right"></i></div>
            </div>
          </template>
          <div class="itemCon">
            <div v-if="item.doc.type == 'D0'">
              <div class="ic_title" v-if="item.doc.data.desc != ''">{{item.doc.type}} 症状:</div>
              <div class="ic_con" v-html="item.doc.data.desc"></div>
              <div class="ic_title" v-if="item.doc.data.urgency != ''">{{item.doc.type}} 紧急反应措施:</div>
              <div class="ic_con" v-html="item.doc.data.urgency"></div>
              <div class="ic_title" v-if="item.doc.data.config != ''">{{item.doc.type}} 确认与验证:</div>
              <div class="ic_con" v-html="item.doc.data.config"></div>
            </div>
            <div v-if="item.doc.type == 'D2'">
              <div class="ic_title" v-if="item.doc.data.content != ''">{{item.doc.type}} 陈述内容:</div>
              <div class="ic_con" v-html="item.doc.data.content"></div>
              <div class="ic_title" v-if="item.doc.data.desc != ''">{{item.doc.type}} 问题描述:</div>
              <div class="ic_con" v-html="item.doc.data.desc"></div>
            </div>
            <div v-if="item.doc.type == 'D3'">
              <div class="ic_title" v-if="item.doc.data.content != ''">{{item.doc.type}} 措施内容:</div>
              <div class="ic_con" v-html="item.doc.data.content"></div>
              <div class="ic_title" v-if="item.doc.data.confirm != ''">{{item.doc.type}} 确认与验证:</div>
              <div class="ic_con" v-html="item.doc.data.confirm"></div>
            </div>
            <div v-if="item.doc.type == 'D4'">
              <div class="ic_title" v-if="item.doc.data.reason != ''">{{item.doc.type}} 根本原因:</div>
              <div class="ic_con" v-html="item.doc.data.reason"></div>
              <div class="ic_title" v-if="item.doc.data.point != ''">{{item.doc.type}} 逃逸点:</div>
              <div class="ic_con" v-html="item.doc.data.point"></div>
              <div class="ic_title" v-if="item.doc.data.confirm != ''">{{item.doc.type}} 确认与验证:</div>
              <div class="ic_con" v-html="item.doc.data.confirm"></div>
            </div>
            <div v-if="item.doc.type == 'D5'">
              <div class="ic_title" v-if="item.doc.data.content != ''">{{item.doc.type}} 措施内容:</div>
              <div class="ic_con" v-html="item.doc.data.content"></div>
              <div class="ic_title" v-if="item.doc.data.confirm != ''">{{item.doc.type}} 验证:</div>
              <div class="ic_con" v-html="item.doc.data.confirm"></div>
            </div>
            <div v-if="item.doc.type == 'D6'">
              <div class="ic_title" v-if="item.doc.data.content != ''">{{item.doc.type}} 执行内容:</div>
              <div class="ic_con" v-html="item.doc.data.content"></div>
              <div class="ic_title" v-if="item.doc.data.confirm != ''">{{item.doc.type}} 确认:</div>
              <div class="ic_con" v-html="item.doc.data.confirm"></div>
            </div>
            <div v-if="item.doc.type == 'D7'">
              <div class="ic_title" v-if="item.doc.data.content != ''">{{item.doc.type}} 预防内容:</div>
              <div class="ic_con" v-html="item.doc.data.content"></div>
              <div class="ic_title" v-if="item.doc.data.suggestion != ''">{{item.doc.type}} 系统预防的建议:</div>
              <div class="ic_con" v-html="item.doc.data.suggestion"></div>
            </div>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    props: ['historyList'],
    name: "history",
    data() {
      return {
        activeName: '',
      }
    },
    created() {
      console.log(this.historyList,111)
    },
    mounted() {
    },
    methods: {
      //时间戳转换成时间
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return Y + M + D;
      },
    }
  }
</script>

<style lang="less">
  .historyDiv{
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    border: 1px solid #e5e5e5;
    .hisTitle{
      padding: 0 16px;
      background: #fff;
      height: 60px;
      line-height: 60px;
      display: flex;
      flex-direction: row;
      .title{
        color: #222222;
        font-size: 18px;
        box-sizing: border-box;
        margin-right: 10px;
      }
      .num{
        font-size: 16px;
        color: #797c80;
      }
    }
    .el-collapse{
      border-top: none;
      border-bottom: none;
    }
    .items{
      border-top: 1px solid #e5e5e5;
      .el-collapse-item__header{
        padding: 0 16px;
      }
      .el-collapse-item__content{
        padding: 16px;
        border-top: 1px dashed #e5e5e5;
      }
      .itemTitle{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 0;
        .item_left{
          display: flex;
          flex-direction: column;
          .il_top{
            font-size: 18px;
            line-height: 20px;
            color: #222222;
            margin-bottom: 8px;
          }
          .il_bottom{
            font-size: 14px;
            line-height: 16px;
            color: #999999;
          }
        }
        .item_right{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      .itemCon{
        display: flex;
        flex-direction: column;
        .ic_title{
          font-size: 14px;
          color: #222222;
        }
        .ic_con{
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
</style>
